<template>
  <div id="wrapper">
    <div class="logo">
      <img alt="electron" class="logo_icon" src="https://www.electronjs.org/zh/assets/img/logo.svg" />
      <img alt="electron-egg" class="logo_icon" src="https://www.kaka996.com/img/logo.png" />
      <img alt="antdv" class="logo_icon" src="https://next.antdv.com/assets/logo.1ef800a8.svg" />
    </div>
    <h1 class="headline"><span class="accent">演示</span> 关于软件 </h1>

    <a-space :size="1">      
      <a-button size="small" type="link" @click="formVisible = true">用户反馈</a-button>
    </a-space>
    <div class="description">
      <p>
        📌 本项目是本人在学习 Electron-Egg（桌面软件开发框架）过程中的实践集合，界面采用了Ant-Design-Vue。</p>
      <p>
        📌 不同栏目有对Electron能力进行了实例化的展示并附上了简单的说明，方便他同学快速理解Electron以及Electron-Egg框架。
      </p>
      <p>
        📌 软件界面布局参考了著名的 Docker客户端软件 </p>
     <p>
        📌 来源于开源，回馈开源，您可以免费用它创作自己的软件！如果对您有帮助，请不吝您的鼠标，在<a-button size="small" type="link" @click="openExternal('https://gitee.com/vkei/electron-antdv')">Electron-AntDV
          项目主页</a-button>，给我点一个⭐ </p>

      <p class="copyright">
        Copyright ©2025 Caili Studio All Rights Reserved.
      </p>
    </div>

    <a-modal v-model:open="formVisible" title="用户反馈" ok-text="确认提交" cancel-text="取消"
      :cancel-button-props="{ style: { display: 'none' } }"  @ok="onSubmit"> 
      <br>
      <a-form  ref="formRef"
      :Layout="horizontal" 
      :label-col="{ style: { width: '80px' } }"
      :wrapper-col="{ span: 20 }"       
      :model="formState"
      :rules="rulesRef"
        >

        <a-form-item ref="name" name="type" label="反馈类型">
          <a-radio-group v-model:value="formState.type">
            <a-radio value="产品">产品建议</a-radio>
            <a-radio value="合作">合作联系</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item ref="description" name="description" label="具体说明">
          <a-textarea v-model:value="formState.description" :style="{ height: '130px' }" placeholder="用于收集客户反馈信息，可以直接提交到服务端" />
        </a-form-item>

      </a-form>
    </a-modal>

  </div>

</template>

<script setup>

import { reactive, ref, toRaw } from 'vue';
import { message } from 'ant-design-vue';
import { ipc, isEE } from "@/utils/ipcRenderer";
import { ipcApiRoute } from "@/api/main";

const formVisible = ref(false);

// 表单数据和校验规则
const formRef = ref();
const formState = reactive({
  type: '合作',
  description: '',
});
const rulesRef = reactive({
  type: [
    {
      required: true,
      message: '请选择正确的类型，必须选择一个',
    },
  ],
  description: [
    {
      required: true,
      message: '意见内容不能空着',
    },
  ]
});
//表单提交事件处理函数
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {      
      message.success( '数据验证通过，请自行完成提交数据即可！');
      console.log('values', formState, toRaw(formState));
      formVisible.value = false;
      // resetForm();
    })
    .catch(error => {
      console.log('error', error);
    });
};
const resetForm = () => {
  formRef.value.resetFields();
};

// 打开外部链接的函数
function openExternal(url) {     
  //如果启用了上下文隔离( ontextIsolation: true), Electron 13+版本设置默认是启用的。
  //需要设置preload，通过contextBridge暴露的electron对象，及暴露的openExternal方法。
  if (window.electron && window.electron.openExternal) {
    window.electron.openExternal(url).then(() => {
      message.info('启用上下文隔离，需设置preload暴露electron.openExternal方法打开',8);
    }).catch((error) => {
      console.error('打开网页时出错:', error);
    });
  } else {
    //如果不启用上下文隔离( ontextIsolation: false)，则渲染进程中可直接使用electron对象调用openExternal方法。
    const { shell } = require('electron');
    if (shell.openExternal) { // 确保electron版本支持该方法
      shell.openExternal(url).then(() => {
        message.info('未启用上下文隔离，直接使用electron对象调用openExternal打开',8);
      }).catch((error) => {
        console.error('打开网页时出错:', error);
      });
    } else { 
      message.error('非EE环境，不支持openExternal打开默认浏览器', 8)
      window.open(url);
    }
  }
}

</script>

<style scoped>
#wrapper,
.ant-modal-content,
.ant-modal-body {
  -webkit-user-select: none !important;

}

html:not(.dark) .accent {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
  background-clip: text;
  letter-spacing: 1.5px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.headline {
  font-size: 22px;
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: -1.2px;
  margin: 10px auto 20px;
}

.logo {
  width: 180px;
  overflow: hidden;
  float: right;
  margin: 40px 20px 40px 50px;
  display: flex;
  justify-content: space-around;
}

.logo .logo_icon {
  height: 50px;
}

.description {
  line-height: 1.5;
  font-size: 15px;
  color: #666;
  margin: 40px 40px 15px 0;
}

.description p {
  margin-top: 1em;
}


.copyright {
  margin-top: 50px !important;
  color: #999;
  font-size: 13px;
}
</style>